<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>


<!-- Main content -->
<section class="content" id="my-admin-app">

    <div class="row">
        <div class="col-md-8 col-md-offset-1">
            <ul class="nav nav-tabs">
                <li role="presentation" :class="{active: show.info}" @click="setShow('info')"><a>修改信息</a></li>
                <li role="presentation" :class="{active: show.account}" @click="setShow('account')"><a>修改密码</a></li>
            </ul>
        </div>
    </div>

    <div class="row" v-show="show.info">
        <div class="col-md-8 col-md-offset-1">
            <h4>个人信息</h4>
            <div class="form" role="form">

                <div class="form-group">
                    <label>账户：</label>
                    <span>{{admin.name}}</span>
                </div>

                <div class="form-group">
                    <label>姓名：</label>
                    <span>{{admin.realname}}</span>
                </div>

                <div class="form-group">
                    <label>昵称：</label>
                    <span>{{admin.realname}}</span>
                </div>

            </div>
        </div>
    </div>

    <div class="row" v-show="show.account">
        <div class="col-md-4 col-md-offset-1">
            <h4>修改密码</h4>
            <div class="form" role="form">

                <div class="form-group" ref="account-password_old">
                    <label>原密码：</label>
                    <input class="form-control" type="password" v-model="account.password_old">
                </div>

                <div class="form-group" ref="account-password_new">
                    <label>新密码：</label>
                    <input class="form-control" type="password" v-model="account.password_new">
                </div>

                <div class="form-group" ref="account-password_new2">
                    <label>验证新密码：</label>
                    <input class="form-control" type="password" v-model="account.password_new2">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="updatePassword">提交</a>
                </div>
            </div>
        </div>
    </div>

</section>
<!-- /.content -->

<script>
    var my_admin_app = new Vue({
        el: '#my-admin-app',
        data: {
            account: {},
            admin: {},
            show: {
                info: true,
                account: false
            }
        },
        created: function () {
            this.admin = getGlobalAdmin();
        },
        methods: {
            updatePassword: function () {

                if (this.account.password_new == this.account.password_old) {
                    this.$refs['account-password_new'].classList.add('has-error');
                    showAlert('error',"新旧密码相同！");
                    return;
                }

                this.$refs['account-password_new2'].classList.remove('has-error');
                if (this.account.password_new !== this.account.password_new2) {
                    this.$refs['account-password_new2'].classList.add('has-error');
                    showAlert('error',"新密码不一致！");
                    return;
                }

                ajax({
                    uri: '/account/update_password',
                    data: this.account,
                    success: function (resp) {
                        this.account = {};
                    }.bind(this),
                    error: function (resp) {
                    }.bind(this)
                })
            },
            setShow: function (name) {
                for (var p in this.show) {
                    this.show[p] = (p === name);
                }
            }
        }
    })
</script>